import {Component} from 'react'
import Taro from '@tarojs/taro'
import {View, Text, Image} from '@tarojs/components'
import { AtAccordion } from 'taro-ui'
import 'taro-ui/dist/style/index.scss'
import {
  AtButton, AtSearchBar, AtList, AtListItem, AtCard, AtIcon, AtCalendar,
  AtTabs, AtTabsPane, AtTabBar, AtTag, AtRate
} from 'taro-ui'

import "taro-ui/dist/style/components/button.scss" // 按需引入
import '../index/index.less'
import './appointment.less'

export default class Appointment extends Component {
  state = {
    value: "",
    current: 0,
    star: 3
  }

  /*搜索*/
  onSearch(value) {
    this.setState({
      value: value
    })
  }

  onActionClick() {
    console.log('开始搜索')
  }

  /*页面切换*/
  handleClick(value) {
    this.setState({
      current: value
    })
  }

  /*跳转*/
  toAppointmentInfo() {
    Taro.navigateTo({
      url: '/pages/appointment/appointmentInfo'
    })
  }

  handleSelectClick (value) {
    this.setState({
      open: value
    })
  }

  render() {
    var tabList = [{title: "首页", iconType: "home"}, {title: "我的", iconType: "user"}]
    return (
      <View className='appointment'>
        <AtTabBar
          fixed
          tabList={tabList}
          onClick={this.handleClick.bind(this)}
          current={this.state.current}
        />
        <AtTabs current={this.state.current} onClick={this.handleClick.bind(this)}>
          <AtTabsPane current={this.state.current} index={0}>
            <View style='padding: 10px 0px;background-color: #FAFBFC;text-align: center;'>
              <AtSearchBar
                actionName='搜索'
                value={this.state.value}
                onChange={this.onSearch.bind(this)}
                onActionClick={this.onActionClick.bind(this)}
              />
              <AtList hasBorder={false}>
                <View className='listHeader'>
                  <View className='listHeaderLeft'>
                    <Text>按距离</Text>
                    <Image src={require('./u738.svg')} style='width:16px;height:16px;'/>
                  </View>
                  <View className='listHeaderRight' >
                    <Text>筛选</Text>
                    <Image src={require('./u735.svg')} style='width:16px;height:16px;'/>
                    <AtAccordion
                      open={this.state.open}
                      onClick={this.handleSelectClick.bind(this)}
                    >
                      <AtList hasBorder={false}>
                        <AtListItem
                          title='评分'
                          thumb='https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png'
                        />
                        <AtListItem
                          title='剩余量'
                          thumb='http://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png'
                        />
                      </AtList>
                    </AtAccordion>
                  </View>
                </View>
                <View className='my-card' onclick={this.toAppointmentInfo}>
                  <View className='my-card-picture'>
                    <AtIcon></AtIcon>
                  </View>
                  <View className='my-card-item'>
                    <View className='my-info'>
                      <Text>医院名称</Text>
                    </View>
                    <View className='my-info'>
                      <AtRate
                        value={this.state.star}
                      />
                    </View>
                    <View className='my-info'>
                      <Text>剩余数 xx </Text>
                      <Text>距离</Text>
                    </View>
                  </View>
                </View>
              </AtList>
            </View>
          </AtTabsPane>
          <AtTabsPane current={this.state.current} index={1}>
            <View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;'>标签页二的内容</View>
          </AtTabsPane>
        </AtTabs>
      </View>
    )
  }
}
